<template>
  <div class="app-container">
    <el-dialog :visible.sync="showChildDialog" v-bind="$attrs" v-on="$listeners" @open="onOpen" @close="onClose"
               title="订单详情"
    >
      <el-row :gutter="20" style="margin-right: 15px;margin-left: -5px" type="flex" v-loading="loading">
        <el-col v-for="(item, index) in productList" :key="index" :span="12">
          <el-card class="box-card" shadow="always" :body-style="{ padding: '0px' }">
            <div slot="header" class="header">
              <span class="label">{{ item.name }}</span>
              <!--            <span class="header-label">{{item.sex==0?'男':'女'}}</span>-->
            </div>
            <div style="margin: 15px">
              <!--
                          <el-avatar shape="square" :size="100" :fit="'scale-down'" :src="item.mainImage"></el-avatar>
              -->
              <image-preview :src="item.mainImage" :width="50" :height="50"/>
              <div style="float: right">
                <div class="card-label">单价(元)</div>
                <span>{{ item.price }}</span><br>
                <div class="card-label">数量(件)</div>
                <span>{{ item.num }}</span><br>
                <div class="card-label">商品描述</div>
                <span>{{ item.therapeuticEffect }}</span><br>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import { getOrderProduct } from '@/api/mall/orders'

export default {
  name: 'orderDetail',
  dicts: [],
  inheritAttrs: false,
  components: {},
  props: {
    isOpen: {
      type: Boolean,
      default: false
    },
    orderId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      productList: []
    }
  },
  computed: {
    showChildDialog: {
      get: function() {
        return this.isOpen
      },
      set: function(newValue) {
        this.$emit('update:isOpen', newValue) // 触发更新事件，父组件的showDialog会自动更新
      }
    }
  },
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    onOpen() {
      getOrderProduct(this.orderId).then(res => {
        this.productList = res.data
      })
    },
    onClose() {
      this.productList = []
      this.orderId = null
    },
    close() {
      this.showChildDialog = false
    }
  }
}

</script>
<style scoped lang="scss">
.el-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.el-row .el-card {
  min-width: 100%;
  height: 100%;
  margin-right: 20px;
  transition: all .5s;
}

.el-form-item {
  margin-bottom: 0 !important;
}

.pagination-container {
  margin-top: -3px;
  margin-bottom: 30px;
}

.box-card {
  .header {
    position: relative;

    .label {
      padding: 0 3px;
      background-color: #fdf0da;
      color: #f19901;
    }

    .header-label {
      padding-left: 10px;
    }
  }

  .footer {
    font-size: 18px !important;
    background-color: rgb(245, 247, 251);
    display: flex;
    height: 50px;
    justify-content: space-evenly;
  }

  .card-label {
    color: rgb(197, 197, 197);
    margin-right: 8px;
    width: 70px;
    display: inline-block;
    margin-bottom: 5px;
  }

}

.el-dialog {
  height: 90%;
}

.el-col-24 {
  width: 50%;
}
</style>
